<!--
 * @Description: 
 * @version: 
 * @Author: wyx
 * @Date: 2020-09-24 11:02:37
 * @LastEditDate: Do not exit
-->
<template>
  <div>
      <el-container>
      <el-header>
        <Head/>
      </el-header>

      <el-main>
          <div class="main-body">
              <div class="detail-title">
                <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-top:20px;padding-left:30px;">
                    <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-home"></i>首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
              <div class="detail-main">
                  <div class="detail-main-left">
                      <div style="border:1px solid #eee">
                          <vue-photo-zoom-pro :url="url"></vue-photo-zoom-pro>
                      </div>
                        <br/>
                        <el-carousel :interval="4000" type="card" height="100px">
                            <el-carousel-item v-for="item in getImg(this.items)" :key="item">
                                <img :src="item" alt="" @click="getUrl(item)" style="height:100%;width:100%;">
                            </el-carousel-item>
                        </el-carousel>
                  </div>
                  <div class="detail-main-right">
                      <div class="rt">
                          <p><strong>{{subtitle}}</strong></p>
                          <p style="text-decoration:line-through;">原价:￥{{oPrice}}</p>
                          <p>现价:￥{{nPrice}}</p>
                          <p>规格参数:{{specifications}}</p>
                          <p>库存:{{stock}}</p>
                          <p>销量:{{platinum}}</p>
                          <p>活动:运费包邮！</p>
                          <p>购买数量: <el-input-number size="small" v-model="num" :min="1" :max="max"></el-input-number><small> (最大购买数量:{{max}})</small></p>
                          <br/>
                          <button class="btn1" onmouseover="this.style.backgroundColor='pink';" onmouseout="this.style.backgroundColor='';" @click="toCar">加入购物车</button>
                      </div>
                  </div>
              </div>
              <div class="detail-detail">
                  <el-tabs v-model="activeName" style="height:700px;">
                    <el-tab-pane label="商品详情" name="first">{{detail}}</el-tab-pane>
                    <el-tab-pane label="常见问题" name="second">
                        <p><strong>1.价格说明：</strong></p>
                        <p>A.划线价、参考价</p>  
                        <p>商品展示的划线价或参考价可能是品牌专柜价、商品吊牌供应商提供的正品零售价（如厂商指导价、建议零售价等）</p>
                        <p>B.促销价</p>
                        <p>如无特殊说明，促销价是销售商在参考价基础上给予的优惠价格。如有疑问，您可以在购买前联系客服。</p>
                        <p><strong>2.物流配送说明：</strong></p>
                        <p>A.运费说明</p>  
                        <p>为了更好地为中国顾客服务，我们为满80欧及以上金额的订单提供免邮中国的服务（限重2kg），对于不满80欧的订单收取14.95欧的国际物流配送费。</p>
                        <p>B.物流承运商及时效</p>
                        <p>登陆您的个人账号，如果您的订单已发货，发货后可用物流单号追踪您的包裹，点击“个人中心—历史订单—物流追踪”即可查询。</p>
                        <p>C.发货时效</p>
                        <p>正常情况下，我们会在您付款后的一个工作日内发货；然而在特别繁忙的订单高峰期（比如黑五期间），我们可能需要3-5个工作日才能发货。</p>
                        <p><strong>3.正品保证：</strong></p>
                        <p>本网站郑重承诺：本网站销售的商品均为优质海外采购商品，本网站（http://www.perfumesclub.cn/）展示或销售的所有商品100%为品牌方正品且本网站有权展示或销售该商品。同时，本网站承诺所有在售商品质量均符合原产地国家或行业质量检测标准。</p>
                    </el-tab-pane>
                </el-tabs>

                <h2>猜你喜欢</h2>
                <p style="text-align:right;"><i class="el-icon-refresh-right"></i>换一批</p>
                <div class="second-body">
                    <ul class="second-war">
                        <li v-for="item in items1" :key="item.id">
                            <el-card shadow="hover">
                                <a class="item-a" href="#"><img :src="item.mainImage" alt=""></a>
                                <el-link><strong>{{item.title}}</strong></el-link>
                                <p><span style="color:red;margin-right:80px;">现价:￥{{item.nowPrice}}</span>
                                <span style="background-color:pink;color:#fff">运费包邮</span>
                                    </p>
                                <button class="btn" onmouseover="this.style.backgroundColor='pink';" onmouseout="this.style.backgroundColor='';" @click="toCar(item.id)">加入购物车</button>
                            </el-card>
                        </li>
                    </ul>
                </div>
              </div>

              
          </div>

          <el-dialog
        title="添加购物车"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <span>恭喜你，已成功添加至购物车!</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">继续逛逛</el-button>
            <el-button type="primary" @click="see">查看我的购物车</el-button>
        </span>
        </el-dialog>
        
      </el-main>

      <el-footer>
        <Foot/>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import Head from "@/views/layout/Head.vue"
import Foot from "@/views/layout/Foot.vue"
import {getById,getLike} from "@/api/goods.js"
import {insert} from "@/api/cart.js"
import ShareData from '@/utils/localStorage.js'

export default {
    components: {
        Head,
        Foot
    },
    data(){
        return{
            items:[],
            items1:[],
            url:"",
            title:"",
            subtitle:"",
            oPrice:"",
            nPrice:"",
            specifications:"",
            stock:"",
            platinum:"",
            detail:"",
            max:"",
            head:"https://zpl-1303223223.cos.ap-beijing.myqcloud.com",
            num:1,
            activeName:"second",
            centerDialogVisible:false,
            gId:"",
            car:{},
        }
    },
    created(){
        this.loadDetail();
        this.loadLike();
    },
    methods:{
        getUrl(item){
            this.url=item;
        },
        loadDetail(){
            let id=this.$route.params.id;  
            getById(id).then(res=>{
                if(res.data.code==="0000"){
                    // console.log(res.data.data);
                    this.gId=res.data.data.id;
                    this.url=this.head+res.data.data.mainImage;
                    this.items=res.data.data.subImages;
                    this.title=res.data.data.title;
                    this.subtitle=res.data.data.subtitle;
                    this.oPrice=res.data.data.originalPrice;
                    this.nPrice=res.data.data.nowPrice;
                    this.specifications=res.data.data.specifications;
                    this.stock=res.data.data.stock;
                    this.max=res.data.data.maxBuyCount;
                    this.platinum=res.data.data.platinum;
                    this.detail=res.data.data.detail;
                }
            })
        },
        getImg(val){
            val=val.substring(0,val.length-1);
            let words=val.split(',');
            // console.log(words);
            for(let i=0;i<words.length;i++){
                words[i]=this.head+words[i];
            }
            return words;
        },
        loadLike(){
            getLike().then(res=>{
                if(res.data.code==="0000"){
                    this.items1=res.data.data;
                    for(let i=0;i<this.items1.length;i++){
                        this.items1[i].mainImage=this.head+this.items1[i].mainImage;
                    }
                }
            })
        },
        toCar(){
            this.car.memberId=ShareData.getItem('memberId');
            // console.log(this.car.memberId)
            this.car.goodId=this.gId;
            this.car.goodNum=1;
            this.car.checked=0;
            console.log(this.car);
            insert(this.car).then(res=>{
                if(res.data.code==="0000"){
                    this.centerDialogVisible=true;
                }
            })
        },
        see(){
            this.$router.push("/car");
        },
    },

}
</script>

<style scoped>
.el-header{
    background-color: #fff;
    color: #333;
    text-align: center;
    /* line-height: 100px; */
  }
  .el-main {
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    text-align: center;
    height: 2400px;
    
  }
  .el-main::-webkit-scrollbar{
    display: none;
  }
  .el-footer {
    background-color: rgb(173, 163, 163);
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .main-body{
      width: 80%;
      height: 1600px;
      margin-top: 20px;
      margin-left: 10%;
      margin-right: 10%;
      /* background-color: rgb(219, 190, 190); */
  }
  .detail-main{
      width: 100%;
      height: 600px;
      margin-top: 30px;
  }
  .detail-main-left{
      width: 400px;
      height: 400px;
      position: absolute;
      top:180px;
      left: 200px;
  }
  .detail-main-right{
      width: 600px;
      height: 400px;
      /* background: rgb(136, 109, 109); */
      position: absolute;
      top:180px;
      left: 750px;
  }
  .rt p{
      text-align: left;
  }
  .btn{
    width: 300px;
    height: 50px;
    margin-left: -300px;
    background-color:#000;
    color: #fff;
}
.detail-detail{
    width: 860px;
    position: absolute;
    top:730px;
    left: 350px;
}
.detail-detail p{
    text-align: left;
}
.second-war{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-left: -140px;
}
.second-war li{
    width: 310px;
    height: 380px;
    margin-right: 10px;
    margin-bottom:40px;
}
.btn{
    width: 260px;
    height: 40px;
    background-color:#000;
    color: #fff;
    margin-left: 5px;
}
.btn1{
    width: 260px;
    height: 40px;
    background-color:#000;
    color: #fff;
    margin-left: -300px;
}
</style>